import Rte from 'editor/index'
import { RteCommandProp } from 'editor/command/declate'
import { ElementListener, Refs, RenderInst } from 'share/declare'

import ast from '!!html-ast-loader!./button.html'
import render from 'share/render'

interface ButtonMenuRefs extends Refs {
  root: HTMLDivElement
  button: HTMLDivElement
  icon: HTMLSpanElement
}

export default class ButtonMenu implements RenderInst {
  // @ts-ignore
  public $refs: ButtonMenuRefs = {}

  public $listener: ElementListener<ButtonMenu> = {
    mousedown() {
      this.editor.$moniter.$emit('hidebar', null)
    },
    run() {
      this.run()
    },
  }

  public constructor(public editor: Rte, public command: RteCommandProp, icon: string) {
    render(ast, this)

    const { button } = this.$refs

    this.$refs.icon.classList.add(icon)

    editor.$moniter.$on('issets', (commands) => {
      if (commands.includes(command)) {
        button.classList.add('rte-active')
      } else {
        button.classList.remove('rte-active')
      }
    })
  }

  public run() {}
}
